<template>
  <div class="category_page recommend_custom_page footer-page">
    <div class="top_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.main_title" :name="item.id + ''">
        </el-tab-pane>
      </el-tabs>
      <el-link v-if="tabList.length > 0 && $hasMethod('#add')" href="/h5Config/show" :underline="false" type="primary">添加板块</el-link>
    </div>
    <div class="flex tab_content">
      <div class="flex-1 text-center img_wrapper">
        <el-image :src="require('../../../assets/images/h5-custom.jpg')">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div v-if="!$hasMethod('#edit')" class="mask" />
        <h5>{{ configTitle }}</h5>
        <div class="main">
          <div class="warn-box">
            <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
            <p><span>图片要求！</span><br>商品图片要求PNG格式透明底图片；<br>推荐位背景图尺寸650×280px；<br>图片尺寸要求500×500px；</p>
          </div>
          <div class="input_wrapper">
            <div class="flex">
              <label class="flex align-center justify-center">主标题</label>
              <el-input v-model="submitForm.main_title" type="text" placeholder="请输入主标题" :maxlength="5" clearable />
            </div>
            <div class="flex">
              <label class="flex align-center justify-center">副标题</label>
              <el-input v-model="submitForm.sub_title" type="text" placeholder="请输入副标题" :maxlength="10" clearable />
            </div>
          </div>
          <p class="title">一级推荐位</p>
          <crop-upload
            style="width: 360px;margin: 20px auto;"
            show-type="photo"
            :init-val="submitForm.background_img"
            wrapper-width="360px"
            wrapper-height="115px"
            :img-width="650"
            :img-height="280"
            :photo-width="360"
            :photo-height="115"
            @setVal="(val) => { submitForm.background_img = val }"
          />
          <goods-form :form-data="goodsData" :show-checked-tool="true" :show-tool="$hasMethod('#edit')" />
          <p class="title">二级推荐位</p>
          <template v-for="(item, index) in dataList">
            <goods-link :key="index" :goods-data="item" :show-tool="$hasMethod('#edit')" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
          </template>
          <div v-if="dataList.length < 8 && $hasMethod('#edit')" class="add-div" @click="openSelect">
            <i class="el-icon-plus" />添加商品({{ dataList.length }}/8)
          </div>
        </div>
      </div>
    </div>
    <div v-if="$hasMethod('#edit')" class="page-footer-btns">
      <el-button size="small" @click="reset">重置</el-button>
      <el-button size="small" type="primary" @click="submit">保存</el-button>
    </div>
    <goods-dialog ref="goodsDialog" :multiple="true" :maxNum="8" :show-checked-tool="true" @setSelect="setSelect" />
  </div>
</template>

<script>
import { h5HomeCustomPlateList, getCustomModuleGoodsByModuleid, addOrEditCustomModuleGoods } from '@/api/recommend'
import goodsForm from '../../recommend/compoments/form'
import goodsDialog from '@/components/goodsDialog.vue'
import goodsLink from '../../recommend/compoments/goodsLink'
import cropUpload from '@/components/cropUpload'
export default {
  components: { goodsForm, goodsDialog, goodsLink, cropUpload },
  data() {
    return {
      activeName: '',
      tabList: [],
      dataList: [],
      submitForm: {
        main_title: '',
        sub_title: '',
        background_img: '',
      },
      goodsData: {
        goods_id: null,
        goods_img: '',
        goods_name: '',
        goods_title: '',
        goodsData: null
      }
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id === this.activeName)
      return tab ? tab.main_title : '自定义板块配置'
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      let item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index - 1])
      this.$set(this.dataList, index - 1, item)
    },
    // 降序
    downSort(index) {
      if (index === this.dataList.length - 1) {
        return
      }
      let item = this.dataList[index]
      this.$set(this.dataList, index, this.dataList[index + 1])
      this.$set(this.dataList, index + 1, item)
    },
    // 删除商品
    deleteGoods(index) {
      this.dataList.splice(index, 1)
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = [...this.dataList]
    },
    // 设置选中
    setSelect(goodsList) {
      this.dataList = goodsList
    },
    submit() {
      // 校验
      if (!this.submitForm.main_title) {
        this.$message({
          message: '主标题不能为空',
          type: 'warning'
        })
        return
      }
      if (!this.submitForm.sub_title) {
        this.$message({
          message: '副标题不能为空',
          type: 'warning'
        })
        return
      }
      if (!this.submitForm.background_img) {
        this.$message({
          message: '一级推荐位背景图不能为空',
          type: 'warning'
        })
        return
      }
      if (!this.goodsData.goods_img) {
        this.$message({
          message: '一级推荐位商品图片不能为空',
          type: 'warning'
        })
        return
      }
      if (!this.goodsData.goods_name) {
        this.$message({
          message: '一级推荐位商品名称不能为空',
          type: 'warning'
        })
        return
      }
      if (!this.goodsData.goods_id) {
        this.$message({
          message: '一级推荐位请选择商品链接',
          type: 'warning'
        })
        return
      }
      // 保存
      const goods_arr = this.dataList.map(obj => obj.goods_id)
      const params = {
        module_id: this.activeName,
        goodsidStr: goods_arr.join(','),
        ...this.submitForm,
        ...this.goodsData
      }
      delete params.goodsData
      addOrEditCustomModuleGoods(params).then(res => {
        this.getData()
      })
    },
    reset() {
      // 重置
      this.getData()
    },
    handleClick(tab) {
      this.getData()
    },
    // 获取商品列表
    getData() {
      getCustomModuleGoodsByModuleid(this.activeName).then(res => {
        for (const key in this.goodsData) {
          this.goodsData[key] = res[key] || ''
        }
        for (const key in this.submitForm) {
          this.submitForm[key] = res[key] || ''
        }
        this.dataList = res.goods
      })
    },
    getTabs() {
      h5HomeCustomPlateList().then(res => {
        this.tabList = res
        this.activeName = this.tabList[0].id + ''
        this.getData()
      })
    }
  },
  mounted() {
    this.getTabs()
  }
}
</script>

<style lang="scss" scoped>
.recommend_custom_page {
  .config_wrapper {
    &>div label {
      width: 70px;
    }

    .input_wrapper {
      margin-left: 0;
    }
  }
}
</style>
